<template>
  <div class="errPage-container">
    <div class="e401">
    <el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
      返回
    </el-button>
    <el-row>
      <el-col :span="12">
        <h1 class="text-jumbo">
          Oops!
        </h1>
        <h2>你没有权限去该页面</h2>
        <h6>如有不满请联系你领导</h6>
        <ul class="list-unstyled">
          <li>或者你可以去:</li>
          <li class="link-type">
            <router-link to="/manage">
              回首页
            </router-link>
          </li>
           <li><a href="#" @click.prevent="dialogVisible=true">点我看图</a></li>
        </ul>
      </el-col>
      <el-col :span="12">
        <img src="../../assets/img/401.gif" width="313" height="428" alt="Girl has dropped her ice cream.">
      </el-col>
    </el-row>
      <el-dialog :visible.sync="dialogVisible" title="随便看">
      <img :src="ewizardClap" class="pan-img">
    </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ewizardClap: 'https://wpimg.wallstcn.com/007ef517-bafd-4066-aae4-6883632d9646',
      dialogVisible: false
    }
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  },
  components:{
  }
}
</script>

<style scoped>
.e401{
    min-width: 100%;
}
.pan-back-btn{
    background: #008489;
    color: #fff;
    margin-left: 26%;
    margin-top: 80px;
}
.text-jumbo{
    font-size: 60px;
    font-weight: 700;
    color: #484848;
    margin: 25px;
    margin-left: 51%;
}
h2{
      margin-left: 51%;
      margin-bottom: 25px;
}
h6{
     margin-left: 51%;
      margin-bottom: 25px;
}
.list-unstyled{
     margin-left: 55%;
     font-size: 14px;
}
a{  
    color: #008489;
    text-decoration: none;
}
.link-type::before{
    color: #008489;
}
</style>
